<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    response.setHeader("cache-control","public");
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<!-- 考试入口页面 -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/common.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/css/practice/test-system.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/static/loading/css/style.css" />
    <style type="text/css">
        .backImg {
            background-image: url('<%=path%>/static/images/logo2.png');
            background-repeat: no-repeat;
            background-size: 25px 25px;
            padding-left: 30px;
        }
        /* The loader container */
        .loader {
            margin-top: 230px !important;
            z-index: 999;
        }
        .popWindow {
            background-color:#9D9D9D;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            filter: alpha(opacity=50);
            opacity: 0.5;
            z-index: 1;
            position: absolute;

        }
        .maskLayer {
            background-color:#000;
            width: 200px;
            height: 30px;
            line-height: 30px;
            left: 50%;
            top: 50%;
            color:#fff;
            z-index: 2;
            position: absolute;
            text-align:center;
        }
    </style>
    <script src="<%=path%>/static/loading/js/prefixfree.min.js"></script>
    <script src="<%=path%>/static/loading/js/modernizr.js"></script>
    <script src="<%=path%>/static/js/respond.js"></script>
    <script src="<%=path%>/static/js/practice/textarea.js"></script>
    <!--考试通知倒计时页面 -->
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <!-- <![endif]-->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='<%=path%>/static/js/jquery-1.9.1.min.js'>" + "<" + "/script>");
    </script>
    <script src="<%=path%>/static/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #e4ebf4;">
<div onclick="showDiv()" style="display:block; cursor:pointer">
</div>
<div id="popWindow" class="popWindow" style="display: none; z-index: 998">
</div>
<!--head begin-->
<div class="headbg position_fixed">
    <div class="container header">
        <div class="navheader">
            <div class="navheader">
                <div class="logo pull-left">
                    <h3 class="pc_title backImg">在线考试系统</h3>
                </div>
                <div class="nav-right">
                    <a class="btn btn-info record" href="#"
                       onclick="javascript:window.location.href='../examManagement/exam-center.html';">
                        <i class="glyphicon glyphicon-time"></i>历史考试记录</a>
                </div>
            </div>
        </div>
    </div>
    <!--head end-->

    <!--body begin-->
    <div class="container exam_content" style="margin-top: 0px;!important">
        <div class="loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="exam_top">
            <span class="message">考试通知</span>
        </div>
        <div class="exam_time">
            <span>最近考试将在&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <div id="counter"></div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;后正式开始！</span>
        </div>
        <div class="exam_title">
            <span class="exam_name">${exam.name}</span>
            <a class="btn enter" href="javascript:doPost('<%=basePath %>examCenter/examing', ${exam.id})">
                <i class="glyphicon glyphicon-play"></i>进入考试</a>
            <i class="glyphicon glyphicon-facetime-video shexiang"></i>
            <span class="exam_date"><fmt:formatDate value="${exam.starttime}" type="both"/></span>
            <span class="exam_sj"><i class="glyphicon glyphicon-time"></i>${exam.duration}分钟</span>

        </div>

        <div class="exam_tip">
            <p class="notice">注意事项：</p>
            <ul class="notice_main">
                <li>答题开始后系统会自动计时，考试时间结束系统自动交卷；</li>
                <li>考试过程中请勿关闭、最小化或切换考试窗口页面</li>
                <li>断电、网络中断、系统重新启动等情况下，请从新登陆并进入考试页面，可在上次中断处继续答题；</li>
            </ul>
        </div>
    </div>
    <!--body end-->

    <!--footer begin-->

    <!--footer end-->
    <script src="<%=path%>/static/js/practice/jquery.countdown.js"></script>
    <script type="text/javascript">
        var timeleftsecond = parseInt('${exam.extend2}') *10000;
        if(timeleftsecond==""|| timeleftsecond==undefined) {
            timeleftsecond = "100000";
        }
        $(function () {
            if (timeleftsecond<0) {
                doPost('<%=basePath %>examCenter/examing', ${exam.id});
            } else {
                var timeleft = '${exam.extend}';

                if(timeleft=="") {
                    timeleft = "00:00:10";
                }
                $('.loader').hide();
                $(".enter").css("pointer-events", "none");
                $('#counter').countdown({
                    image: '<%=path%>/static/images/practice/digits.png',
                    startTime: timeleft
                });
            }
        });

        function showDiv() {
            document.getElementById('popWindow').style.display = 'block';
        }
        function closeDiv() {
            document.getElementById('popWindow').style.display = 'none';
        }

        $("a").click(function(){
            $(this).css("color","#CCC");
            $(this).unbind("click");
        })

        function doPost(to, v) {
            $('.loader').show();
            showDiv();
            $('.enter').attr('href', '#');
            var myForm = document.createElement("form");
            myForm.method = "post";
            myForm.action = to;
            var myInput = document.createElement("input");
            myInput.setAttribute("name", "exam_id");  // 为input对象设置name
            myInput.setAttribute("value", v);  // 为input对象设置value
            myForm.appendChild(myInput);
            document.body.appendChild(myForm);
            myForm.submit();
            document.body.removeChild(myForm);  // 提交后移除创建的form
        }

        function jionExam() {
            $(".enter").css("background", "#2fab08");
            $(".enter").css("color", "black");
            $(".enter").css("pointer-events", "auto");
        }
        function jionExamDone() {

            //doPost('<%=basePath %>examCenter/examing', ${exam.id});

        }
        setTimeout(jionExam, timeleftsecond-5);
        setTimeout(jionExamDone, timeleftsecond);
    </script>
</div>
</body>
</html>
